<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>{{name}}</h1>
        <button @click="name='老吴'">修改名称</button>
        <hr>
        <!-- 1. 使用子组件的时候传递一个属性 name='老吴' -->
        <!-- 传递参数的时候，只要不是纯字符串都需要加 : v-bind  比如传数字18时，v-bind是引号中数据变js表达式-->
        <box :name="name" sex="男" :age="18"></box>
        <!-- 父组件传递给子组件响应式数据的时候要知道，父组件修改完这个数据后会同步到子组件 -->
    </div>
</body>

<template id="box">
    <div>
        <!-- 3. 在子组件中使用 -->
        <h1>{{name}} - {{sex}} - {{age + 1}} </h1>
        <!-- 无法修改，父给子传数据，子组件只能使用无法修改，又称为 单向数据流 -->
        <button @click="name='老吴'">子修改名称</button>
    </div>
</template>
<script>
    const box = {
        template: '#box',
        // 2. 接收父组件传递的数据
        props: ['name', 'sex', 'age'],
        data() {
            return {

            }
        },
    }
    const app = {
        data() {
            return {
                name: '老王',
                list: [
                    {
                        img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/232013/23/36636/94435/676299c7Fab545cc0/0feef9d782e41a23.jpg!q70.dpg.webp',
                        title: '凡士林沐浴露',
                        price: '99'
                    }, {
                        img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t26188/22/515122009/310966/bfb5a46b/5bb0624cN1e39ace5.jpg!q70.dpg.webp',
                        title: '泸州老窖',
                        price: '199'
                    }
                ]
            }
        },
        components: {
            box
        },
        methods: {},
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>